<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="preview-box__body">
        <template v-if="previewModel === 'single'">
            <component
                :data="data"
                :model="model"
                :inlineModel="inlineModel"
                :previewModel="previewModel"
                @change="handleChange"
                :is="currentType === 'form' ? 'preview-form' : 'preview-table'"
            >
            </component>
        </template>
        <template v-else>
            <preview-form
                :data="data"
                :model="model"
                :inlineModel="inlineModel"
                :previewModel="previewModel"
                ></preview-form>
            <preview-table
                :data="data"
                :model="model"
                :inlineModel="inlineModel"
                :previewModel="previewModel"
                ></preview-table>
        </template>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import PreviewTable from "./table.vue";
import PreviewForm from "./form.vue";

@Component({
    components: {
        PreviewTable,
        PreviewForm
    }
})
export default class PreviewList extends Vue {
    @Prop({
        type: String,
        default: "form"
    })
    readonly previewType!: string;

    @Prop({
        type: String,
        default: "single"
    })
    readonly previewModel!: string;

    @Prop({
        type: Array,
        default: () => {
            return [];
        }
    })
    readonly data!: any | any[];

    @Prop({
        type: Object,
        default: () => {
            return {};
        }
    })
    readonly model!: any;

    @Prop({
        type: Boolean,
        default: false
    })
    readonly inlineModel!: boolean;

    currentType = "";

    @Watch("previewType", { immediate: true })
    onPreviewTypeChange() {
        this.currentType = this.previewType;
    }

    handleChange(type: string) {
        this.currentType = type;
    }
}
</script>
